import './detailStyle.css'
import { Breadcrumb, Button, Carousel, Checkbox, Empty, Input, Spin, Tag, Typography } from 'antd'
import { HomeOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'
import location from '@/assets/park/location.png'
import { useCallback, useEffect, useRef, useState } from 'react'
import emptyParkImg from '@/assets/park/emptyParkImg1.png'
import leftArrow from '@/assets/park/left-arrow.png'
import rightArrow from '@/assets/park/right-arrow.png'
import laba from '@/assets/park/laba1.png'
import relation from '@/assets/park/relation.png'
import arrowDownImg from '@/assets/park/arrowDown.png'
import { getUrlSearchParams, initPageType, usePageChange } from '@hs-admin/utils'
import { getCompanyFilterOptions, getCompanyList, getGmTagTree, getHsTagTree, getParkCompanyCount, getZxTagTree } from '@/api/park.ts'
import type { CarouselRef } from 'antd/es/carousel'
import { tranNumber } from '@/utils/chineseNumber.ts'
import { openCompanyDetail } from 'hs-react-company'
const { Paragraph } = Typography

const { Search } = Input

const companyCountArr = [
  {
    label: '上市企业',
    key: 'listedCompanyCount'
  },
  {
    label: '专精特新企业',
    key: 'specializedNewCount'
  },
  {
    label: '高新技术企业',
    key: 'highTechCount'
  },
  {
    label: '科技型中小企业',
    key: 'techSmeCount'
  }
]

const initPage: initPageType = {
  morePageOptions: {},
  total: 0,
  current: 1,
  pageSize: 50
}

const getDefaultYear = () => {
  const now = new Date()
  if (now.getMonth() + 1 >= 5) {
    return (now.getFullYear() - 1).toString()
  } else {
    return (now.getFullYear() - 2).toString()
  }
}

const handleStrData = <T extends string | Array<string>>(
  rawData: Array<string> | string | undefined,
  itemKey: string,
  outPutType: T,
  separator = ','
): T extends string ? string | undefined : Array<string> | undefined => {
  let arr: Array<string> | undefined
  if (Array.isArray(rawData)) {
    arr = rawData
  } else if (rawData) {
    arr = rawData.split(separator)
  }
  if (arr) {
    if (arr.includes(itemKey)) {
      arr = arr.filter((it) => it !== itemKey)
    } else {
      arr.push(itemKey)
    }
  } else {
    arr = [itemKey]
  }

  if (typeof outPutType === 'string') {
    return arr.join(separator) || undefined
  } else {
    return arr.length ? arr : undefined
  }
}

const ParkDetail = () => {
  const [moreFilters, setMoreFilters] = useState(false)

  const [fields, setFields] = useState<{
    hsIndStr?: Array<string>
    financingRound?: Array<string>
    foundDate?: string
    keyword?: string
    neaIndStr?: Array<string>
    qualifiedListName?: Array<string>
    strategicIndStr?: Array<string>
    tradePlate?: Array<string>
    primeBusProfitLevel?: Array<string>
  }>({})

  const haveQueryParams =
    fields.hsIndStr?.length ||
    fields.neaIndStr?.length ||
    fields.strategicIndStr?.length ||
    fields.tradePlate?.length ||
    fields.primeBusProfitLevel?.length ||
    fields.financingRound?.length ||
    fields.foundDate?.length ||
    fields.qualifiedListName?.length ||
    fields.keyword?.length

  const { hsIndStr, primeBusProfitLevel, financingRound, foundDate, neaIndStr, qualifiedListName, strategicIndStr, tradePlate } = fields

  const [companyOptions, setCompanyOptions] = useState<{
    allFoundDate: Array<string>
    allRevenueScale: Array<string>
    allCompanyQualified: Array<string>
    allFinancingRound: Array<string>
    allTradeStatus: Array<string>
  }>({
    allFoundDate: [],
    allRevenueScale: [],
    allCompanyQualified: [],
    allTradeStatus: [],
    allFinancingRound: []
  })

  const [more, setMore] = useState({
    hsLevelOneTags: false,
    zxLevelOneTags: false,
    gmLevelOneTags: false,
    allCompanyQualified: false
  })

  const [hsLevelOneTags, setHsLevelOneTags] = useState<
    Array<{
      title: string
      key: string
    }>
  >([])

  const [gmLevelOneTags, setGmLevelOneTags] = useState<
    Array<{
      title: string
      key: string
    }>
  >([])
  const [zxLevelOneTags, setZxLevelOneTags] = useState<
    Array<{
      title: string
      key: string
    }>
  >([])

  const [companyData, setCompanyData] = useState<Array<any>>([])

  const allFoundDate = companyOptions.allFoundDate
  const allRevenueScale = companyOptions.allRevenueScale
  const allCompanyQualified = companyOptions.allCompanyQualified
  const allFinancingRound = companyOptions.allFinancingRound
  const allTradeStatus = companyOptions.allTradeStatus

  const parkCode = useRef(getUrlSearchParams('code'))

  const refCarousel = useRef<CarouselRef>()

  const [companyCountData, setCompanyCountData] = useState<Record<string, any>>({})

  const [activeImg, setActiveImg] = useState(0)

  const noParkImg = !companyCountData.photoList?.length

  const photoList = noParkImg
    ? [
        {
          photourl: emptyParkImg,
          park_data_type: 'empty'
        }
      ]
    : companyCountData.photoList

  const photoLength = photoList.length

  const parkInfo = companyCountData

  useEffect(() => {
    const theCode = getUrlSearchParams('code')
    if (!theCode) {
      throw {
        message: '没有园区code',
        status: 404
      }
    }
    parkCode.current = theCode

    getCompanyFilterOptions().then((res) => {
      const allFoundDate: Array<string> = res.find((it) => it.name === '成立年限')?.children.map((it) => it.name) ?? []
      const allRevenueScale: Array<string> = res.find((it) => it.name === '主营业务收入')?.children.map((it) => it.name) ?? []
      const allCompanyQualified: Array<string> =
        res
          .find((it) => it.name === '企业资质')
          ?.children.map((it) => it.name)
          .concat(['雏鹰企业', '隐形冠军企业']) ?? []
      const allFinancingRound: Array<string> = res.find((it) => it.name === '融资轮次')?.children.map((it) => it.name) ?? []
      const allTradeStatus: Array<string> =
        res
          .find((it) => it.name === '上市情况')
          ?.children.map((it) => it.name)
          .concat(['中概股', '未上市']) ?? []

      setCompanyOptions({
        allFoundDate,
        allRevenueScale,
        allCompanyQualified,
        allFinancingRound,
        allTradeStatus
      })
    })

    getParkCompanyCount(theCode).then((res) => {
      setCompanyCountData(res)
      setActiveImg(0)
    })
    getHsTagTree().then((res) => {
      setHsLevelOneTags(
        res.map((it) => ({
          title: it.name,
          key: it.id
        }))
      )
    })
    getZxTagTree().then((res) => {
      setZxLevelOneTags(
        res.map((it) => ({
          title: it.name,
          key: it.id
        }))
      )
    })
    getGmTagTree().then((res) => {
      setGmLevelOneTags(
        res.map((it) => ({
          title: it.name,
          key: it.id
        }))
      )
    })
  }, [])

  const doRequest = useCallback(
    async (page: number, pageSize: number) => {
      if (!parkCode.current) throw '没有园区id'
      const res = await getCompanyList({
        reportYear: getDefaultYear(),
        pageNum: page,
        pageSize: pageSize,
        parkCode: parkCode.current,
        ...fields
      })
      setCompanyData(res.list)
      return res.total ?? 0
    },
    [fields]
  )

  const { resetPageAndTriggerRequest, pagination, loading } = usePageChange(initPage, doRequest)

  useEffect(() => {
    resetPageAndTriggerRequest()
  }, [resetPageAndTriggerRequest])

  return (
    <div className="park-detail-wrapper">
      <div className="breadcrumb white-block">
        <Breadcrumb
          items={[
            {
              href: '/home',
              title: (
                <>
                  <HomeOutlined />
                  <span>首页</span>
                </>
              )
            },
            {
              href: '/explorePark',
              title: <span>园区拓客</span>
            },
            {
              title: parkInfo.parkName ?? '加载中'
            }
          ]}
        />
      </div>
      <div className="park-head white-block">
        <div className="park-pic">
          <Carousel
            autoplay
            ref={refCarousel}
            className="h-200px w-358px"
            afterChange={(currentSlide) => {
              setActiveImg(currentSlide)
            }}>
            {photoList.map((it) => (
              <div key={it.photourl}>
                <img src={it.photourl} alt={it.park_data_type} className="h-200px w-358px" />
              </div>
            ))}
          </Carousel>
          {!noParkImg && (
            <Carousel className="h-64px" speed={50}>
              <div>
                <div className="flex justify-between">
                  <div
                    className="arrow-box"
                    onClick={() => {
                      const prev = activeImg - 1 < 0 ? photoLength - 1 : activeImg - 1
                      refCarousel.current?.goTo(prev)
                    }}>
                    <img src={leftArrow} alt="" className="w-100% h-100%" />
                  </div>
                  <div className="flex gap-8px">
                    {[...photoList.slice(activeImg), ...photoList.slice(0, activeImg)].map((it, index) => (
                      <img
                        src={it.photourl}
                        alt={it.park_data_type}
                        key={it.photourl}
                        className={`w-94px h-64px box-border ${index > 2 ? 'hidden' : ''} ${index === 0 ? 'b-amber b-2 b-solid' : ''}`}
                      />
                    ))}
                  </div>
                  <div
                    className="arrow-box"
                    onClick={() => {
                      const next = activeImg + 1 < photoLength ? activeImg + 1 : 0
                      refCarousel.current?.goTo(next)
                    }}>
                    <img src={rightArrow} alt="" className="w-100% h-100%" />
                  </div>
                </div>
              </div>
            </Carousel>
          )}
          <div className="park-location">
            <img src={location} alt="location" />
            <span>
              {parkInfo.province && `${parkInfo.province}-`}
              {parkInfo.city}
              {parkInfo.area && `-${parkInfo.area}`}
            </span>
          </div>
        </div>
        <div className="park-info">
          <div className="park-title">
            <div className="park-name">
              <span className="name">{parkInfo.parkName}</span>
            </div>
          </div>
          <div className="honor-part">
            {parkInfo.honour?.split(',').map((it) => (
              <div key={it}>
                {/* <img src={honor} alt="honor" /> */}
                <span className="honor">{it}</span>
              </div>
            ))}
          </div>
          <div className="park-tags">
            <span className={parkInfo.parkLevel ? '' : 'hidden'}>{parkInfo.parkLevel}</span>
            <span>{parkInfo.parkType}</span>
            {parkInfo.leadingIndustry?.split(',').map((it) => <span key={it}>{it}</span>)}
          </div>
          <div className="park-detail-info">
            <div className="grid grid-cols-[auto_1fr] overflow-hidden">
              <span className="text-#595959 leading-7">园区地址：</span>
              <Paragraph
                className="leading-7 text-#262626"
                ellipsis={{
                  rows: 1,
                  tooltip: true
                }}>
                {parkInfo.address}
              </Paragraph>
            </div>
            <div className="grid grid-cols-[auto_1fr] overflow-hidden">
              <span className="text-#595959 leading-7">园区简介：</span>
              <Paragraph
                className="leading-7 text-#262626 text-justify"
                style={{ overflowY: 'auto', maxHeight: '300px' }}
                ellipsis={{
                  rows: 2,
                  expandable: 'collapsible'
                }}>
                {parkInfo.describer}
              </Paragraph>
            </div>
          </div>
          <div className="park-affiliated-company">
            <div className="company-count">
              <img src={relation} alt="relation" className="w-40px h-40px" />
              <div>
                <div className="company-text">关联企业</div>
                <div>
                  <span className="company-num">{parkInfo.companyCnt ?? 0}</span>
                  <span className="company-text">家</span>
                </div>
              </div>
            </div>
            <div className="park-kind-counts">
              {companyCountArr.map((it) => (
                <div key={it.key}>
                  <span>{it.label}</span>
                  <span>
                    {companyCountData?.aggCompany?.[it.key] ?? 0}
                    <span>家</span>
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div className="park-filter white-block">
        <div className="search-line">
          <Search
            placeholder="关键词搜索"
            className="w-340px"
            allowClear
            suffix={<img src={'/static/img/park/searchIcon.png'} alt="" style={{ width: '20px', height: '20px' }} />}
            onSearch={(value) => {
              setFields((prevState) => ({
                ...prevState,
                keyword: value || undefined
              }))
            }}
          />
        </div>
        <div className="filter-lines flex flex-col divide-y divide-gray-100">
          <div className="selected-filter-items">
            {(hsIndStr?.length ||
              primeBusProfitLevel?.length ||
              foundDate ||
              neaIndStr?.length ||
              strategicIndStr?.length ||
              qualifiedListName?.length ||
              financingRound?.length ||
              tradePlate?.length) && (
              <Button
                type="link"
                className="p-0 h-unset"
                onClick={() => {
                  setFields((prevState) => ({
                    keyword: prevState.keyword
                  }))
                }}>
                全部清除
              </Button>
            )}

            {/* <span className="choice-title">已选条件:</span> */}
            {hsIndStr?.map((item) => (
              <Tag
                key={item}
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => {
                    const hsIndStr = handleStrData(prevState['hsIndStr'], item, [])
                    return {
                      ...prevState,
                      hsIndStr
                    }
                  })
                }}>
                {hsLevelOneTags.find((it) => it.key === item)?.title ?? '--'}
              </Tag>
            ))}
            {primeBusProfitLevel?.map((item) => (
              <Tag
                key={item}
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => {
                    const primeBusProfitLevel = handleStrData(prevState['primeBusProfitLevel'], item, [])
                    return {
                      ...prevState,
                      primeBusProfitLevel
                    }
                  })
                }}>
                {item}
              </Tag>
            ))}
            {foundDate && (
              <Tag
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => {
                    return {
                      ...prevState,
                      foundDate: undefined
                    }
                  })
                }}>
                {foundDate}
              </Tag>
            )}
            {neaIndStr?.map((item) => (
              <Tag
                key={item}
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => {
                    const neaIndStr = handleStrData(prevState['neaIndStr'], item, [])
                    return {
                      ...prevState,
                      neaIndStr
                    }
                  })
                }}>
                {gmLevelOneTags.find((it) => it.key === item)?.title ?? '--'}
              </Tag>
            ))}
            {strategicIndStr?.map((item) => (
              <Tag
                key={item}
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => {
                    const strategicIndStr = handleStrData(prevState['strategicIndStr'], item, [])
                    return {
                      ...prevState,
                      strategicIndStr
                    }
                  })
                }}>
                {zxLevelOneTags.find((it) => it.key === item)?.title ?? '--'}
              </Tag>
            ))}
            {qualifiedListName?.map((item) => (
              <Tag
                key={item}
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => {
                    const qualifiedListName = handleStrData(prevState['qualifiedListName'], item, [])
                    return {
                      ...prevState,
                      qualifiedListName
                    }
                  })
                }}>
                {item}
              </Tag>
            ))}
            {financingRound?.map((item) => (
              <Tag
                key={item}
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => {
                    const financingRound = handleStrData(prevState['financingRound'], item, [])
                    return {
                      ...prevState,
                      financingRound
                    }
                  })
                }}>
                {item}
              </Tag>
            ))}
            {tradePlate?.map((item) => (
              <Tag
                key={item}
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => {
                    const tradePlate = handleStrData(prevState['tradePlate'], item, [])
                    return {
                      ...prevState,
                      tradePlate
                    }
                  })
                }}>
                {item}
              </Tag>
            ))}
            {/* <div className="more-icon">
              <Button
                type="link"
                onClick={() => {
                  setFields((prevState) => ({
                    keyword: prevState.keyword
                  }))
                }}>
                全部清除
              </Button>
              <Button
                type="link"
                onClick={() => {
                  setMoreFilters((prevState) => !prevState)
                }}>
                {moreFilters ? '收起' : '展开'}筛选
              </Button>
            </div> */}
          </div>
          <div className={more['hsLevelOneTags'] ? '' : 'h-44px'}>
            <span className="choice-title">火石产业:</span>
            <Checkbox
              indeterminate={fields.hsIndStr?.length > 0 && fields.hsIndStr?.length < hsLevelOneTags.length}
              checked={fields.hsIndStr?.length === hsLevelOneTags.length}
              onChange={(e) => {
                setFields((prevState) => ({
                  ...prevState,
                  hsIndStr: e.target.checked ? hsLevelOneTags.map((ele) => ele.key) : undefined
                }))
              }}>
              全选
            </Checkbox>
            {hsLevelOneTags.map((item) => (
              <Checkbox
                key={item.key}
                value={item.key}
                checked={fields.hsIndStr?.includes(item.key)}
                onChange={() => {
                  setFields((prevState) => {
                    const hsIndStr = handleStrData(prevState['hsIndStr'], item.key, [])
                    return {
                      ...prevState,
                      hsIndStr
                    }
                  })
                }}>
                {item.title}
              </Checkbox>
            ))}
            {/* {hsLevelOneTags.map((item) => (
              <span
                key={item.key}
                className={`choice-item ${hsIndStr?.includes(item.key) ? 'active' : ''}`}
                onClick={() => {
                  setFields((prevState) => {
                    const hsIndStr = handleStrData(prevState['hsIndStr'], item.key, [])
                    return {
                      ...prevState,
                      hsIndStr
                    }
                  })
                }}>
                {item.title}
              </span>
            ))} */}
            <div className={`more-icon ${more['hsLevelOneTags'] ? 'active' : ''}`}>
              <span
                className="text-#ff7b20"
                onClick={() => {
                  setMore((prevState) => ({
                    ...prevState,
                    hsLevelOneTags: !prevState['hsLevelOneTags']
                  }))
                }}>
                {more['hsLevelOneTags'] ? '收起' : '展开'}
              </span>
              {/* <Icon
                component={ArrowDown}
                className="size-4 text-#999999"
                onClick={() => {
                  setMore((prevState) => ({
                    ...prevState,
                    hsLevelOneTags: !prevState['hsLevelOneTags']
                  }))
                }}
              /> */}
            </div>
          </div>
          <div>
            <span className="choice-title">营收规模:</span>
            <Checkbox
              indeterminate={fields.primeBusProfitLevel?.length > 0 && fields.primeBusProfitLevel?.length < allRevenueScale.length}
              checked={fields.primeBusProfitLevel?.length === allRevenueScale.length}
              onChange={(e) => {
                setFields((prevState) => ({
                  ...prevState,
                  primeBusProfitLevel: e.target.checked ? allRevenueScale : undefined
                }))
              }}>
              全选
            </Checkbox>
            {allRevenueScale.map((item) => (
              <Checkbox
                key={item}
                value={item}
                checked={fields.primeBusProfitLevel?.includes(item)}
                onChange={() => {
                  setFields((prevState) => {
                    const primeBusProfitLevel = handleStrData(prevState['primeBusProfitLevel'], item, [])
                    return {
                      ...prevState,
                      primeBusProfitLevel
                    }
                  })
                }}>
                {item}
              </Checkbox>
            ))}
            {/* {allRevenueScale.map((item) => (
              <span
                key={item}
                className={`choice-item ${primeBusProfitLevel?.includes(item) ? 'active' : ''}`}
                onClick={() => {
                  setFields((prevState) => {
                    const primeBusProfitLevel = handleStrData(prevState['primeBusProfitLevel'], item, [])
                    return {
                      ...prevState,
                      primeBusProfitLevel
                    }
                  })
                }}>
                {item}
              </span>
            ))} */}
          </div>
          <div>
            <span className="choice-title">成立时间:</span>
            {allFoundDate.map((item) => (
              <span
                key={item}
                className={`choice-item ${foundDate === item ? 'active' : ''}`}
                onClick={() => {
                  setFields((prevState) => {
                    const foundDate = prevState['foundDate'] === item ? undefined : item
                    return {
                      ...prevState,
                      foundDate
                    }
                  })
                }}>
                {item}
              </span>
            ))}
          </div>
          {moreFilters && (
            <>
              <div className={more['gmLevelOneTags'] ? '' : 'h-44px'}>
                <span className="choice-title">国民经济分类:</span>
                <Checkbox
                  indeterminate={fields.neaIndStr?.length > 0 && fields.neaIndStr?.length < gmLevelOneTags.length}
                  checked={fields.neaIndStr?.length === gmLevelOneTags.length}
                  onChange={(e) => {
                    setFields((prevState) => ({
                      ...prevState,
                      neaIndStr: e.target.checked ? gmLevelOneTags.map((ele) => ele.key) : undefined
                    }))
                  }}>
                  全选
                </Checkbox>
                {gmLevelOneTags.map((item) => (
                  <Checkbox
                    key={item.key}
                    value={item.key}
                    checked={fields.neaIndStr?.includes(item.key)}
                    onChange={() => {
                      setFields((prevState) => {
                        const neaIndStr = handleStrData(prevState['neaIndStr'], item.key, [])
                        return {
                          ...prevState,
                          neaIndStr
                        }
                      })
                    }}>
                    {item.title}
                  </Checkbox>
                ))}
                {/* {gmLevelOneTags.map((item) => (
                  <span
                    key={item.key}
                    className={`choice-item ${neaIndStr?.includes(item.key) ? 'active' : ''}`}
                    onClick={() => {
                      setFields((prevState) => {
                        const neaIndStr = handleStrData(prevState['neaIndStr'], item.key, [])
                        return {
                          ...prevState,
                          neaIndStr
                        }
                      })
                    }}>
                    {item.title}
                  </span>
                ))} */}
                <div className={`more-icon ${more['gmLevelOneTags'] ? 'active' : ''}`}>
                  <span
                    className="text-#ff7b20"
                    onClick={() => {
                      setMore((prevState) => ({
                        ...prevState,
                        gmLevelOneTags: !prevState['gmLevelOneTags']
                      }))
                    }}>
                    {more['gmLevelOneTags'] ? '收起' : '展开'}
                  </span>
                  {/* <Icon
                    component={ArrowDown}
                    className="size-4 text-#999999"
                    onClick={() => {
                      setMore((prevState) => ({
                        ...prevState,
                        gmLevelOneTags: !prevState['gmLevelOneTags']
                      }))
                    }}
                  /> */}
                </div>
              </div>
              <div className={more['zxLevelOneTags'] ? '' : 'h-44px'}>
                <span className="choice-title">战新产业分类:</span>
                <Checkbox
                  indeterminate={fields.strategicIndStr?.length > 0 && fields.strategicIndStr?.length < zxLevelOneTags.length}
                  checked={fields.strategicIndStr?.length === zxLevelOneTags.length}
                  onChange={(e) => {
                    setFields((prevState) => ({
                      ...prevState,
                      strategicIndStr: e.target.checked ? zxLevelOneTags.map((ele) => ele.key) : undefined
                    }))
                  }}>
                  全选
                </Checkbox>
                {zxLevelOneTags.map((item) => (
                  <Checkbox
                    key={item.key}
                    value={item.key}
                    checked={fields.strategicIndStr?.includes(item.key)}
                    onChange={() => {
                      setFields((prevState) => {
                        const strategicIndStr = handleStrData(prevState['strategicIndStr'], item.key, [])
                        return {
                          ...prevState,
                          strategicIndStr
                        }
                      })
                    }}>
                    {item.title}
                  </Checkbox>
                ))}
                {/* {zxLevelOneTags.map((item) => (
                  <span
                    key={item.key}
                    className={`choice-item ${strategicIndStr?.includes(item.key) ? 'active' : ''}`}
                    onClick={() => {
                      setFields((prevState) => {
                        const strategicIndStr = handleStrData(prevState['strategicIndStr'], item.key, [])
                        return {
                          ...prevState,
                          strategicIndStr
                        }
                      })
                    }}>
                    {item.title}
                  </span>
                ))} */}
                <div className={`more-icon ${more['zxLevelOneTags'] ? 'active' : ''}`}>
                  <span
                    className="text-#ff7b20"
                    onClick={() => {
                      setMore((prevState) => ({
                        ...prevState,
                        zxLevelOneTags: !prevState['zxLevelOneTags']
                      }))
                    }}>
                    {more['zxLevelOneTags'] ? '收起' : '展开'}
                  </span>
                  {/* <Icon
                    component={ArrowDown}
                    className="size-4 text-#999999"
                    onClick={() => {
                      setMore((prevState) => ({
                        ...prevState,
                        zxLevelOneTags: !prevState['zxLevelOneTags']
                      }))
                    }}
                  /> */}
                </div>
              </div>
              <div className={more['allCompanyQualified'] ? '' : 'h-44px'}>
                <span className="choice-title">企业资质:</span>
                <Checkbox
                  indeterminate={fields.qualifiedListName?.length > 0 && fields.qualifiedListName?.length < allCompanyQualified.length}
                  checked={fields.qualifiedListName?.length === allCompanyQualified.length}
                  onChange={(e) => {
                    setFields((prevState) => ({
                      ...prevState,
                      qualifiedListName: e.target.checked ? allCompanyQualified : undefined
                    }))
                  }}>
                  全选
                </Checkbox>
                {allCompanyQualified.map((item) => (
                  <Checkbox
                    key={item}
                    value={item}
                    checked={fields.qualifiedListName?.includes(item)}
                    onChange={() => {
                      setFields((prevState) => {
                        const qualifiedListName = handleStrData(prevState['qualifiedListName'], item, [])
                        return {
                          ...prevState,
                          qualifiedListName
                        }
                      })
                    }}>
                    {item}
                  </Checkbox>
                ))}
                {/* {allCompanyQualified.map((item) => (
                  <span
                    key={item}
                    className={`choice-item ${qualifiedListName?.includes(item) ? 'active' : ''}`}
                    onClick={() => {
                      setFields((prevState) => {
                        const qualifiedListName = handleStrData(prevState['qualifiedListName'], item, [])
                        return {
                          ...prevState,
                          qualifiedListName
                        }
                      })
                    }}>
                    {item}
                  </span>
                ))} */}
                <div className={`more-icon ${more['allCompanyQualified'] ? 'active' : ''}`}>
                  <span
                    className="text-#ff7b20"
                    onClick={() => {
                      setMore((prevState) => ({
                        ...prevState,
                        allCompanyQualified: !prevState['allCompanyQualified']
                      }))
                    }}>
                    {more['allCompanyQualified'] ? '收起' : '展开'}
                  </span>
                  {/* <Icon
                    component={ArrowDown}
                    className="size-4 text-#999999"
                    onClick={() => {
                      setMore((prevState) => ({
                        ...prevState,
                        allCompanyQualified: !prevState['allCompanyQualified']
                      }))
                    }}
                  /> */}
                </div>
              </div>
              <div>
                <span className="choice-title">融资轮次:</span>
                <Checkbox
                  indeterminate={fields.financingRound?.length > 0 && fields.financingRound?.length < allFinancingRound.length}
                  checked={fields.financingRound?.length === allFinancingRound.length}
                  onChange={(e) => {
                    setFields((prevState) => ({
                      ...prevState,
                      financingRound: e.target.checked ? allFinancingRound : undefined
                    }))
                  }}>
                  全选
                </Checkbox>
                {allFinancingRound.map((item) => (
                  <Checkbox
                    key={item}
                    value={item}
                    checked={fields.financingRound?.includes(item)}
                    onChange={() => {
                      setFields((prevState) => {
                        const financingRound = handleStrData(prevState['financingRound'], item, [])
                        return {
                          ...prevState,
                          financingRound
                        }
                      })
                    }}>
                    {item}
                  </Checkbox>
                ))}
                {/* {allFinancingRound.map((item) => (
                  <span
                    key={item}
                    className={`choice-item ${financingRound?.includes(item) ? 'active' : ''}`}
                    onClick={() => {
                      setFields((prevState) => {
                        const financingRound = handleStrData(prevState['financingRound'], item, [])
                        return {
                          ...prevState,
                          financingRound
                        }
                      })
                    }}>
                    {item}
                  </span>
                ))} */}
              </div>
              <div>
                <span className="choice-title">上市情况:</span>
                <Checkbox
                  indeterminate={fields.tradePlate?.length > 0 && fields.tradePlate?.length < allTradeStatus.length}
                  checked={fields.tradePlate?.length === allTradeStatus.length}
                  onChange={(e) => {
                    setFields((prevState) => ({
                      ...prevState,
                      tradePlate: e.target.checked ? allTradeStatus : undefined
                    }))
                  }}>
                  全选
                </Checkbox>
                {allTradeStatus.map((item) => (
                  <Checkbox
                    key={item}
                    value={item}
                    checked={fields.tradePlate?.includes(item)}
                    onChange={() => {
                      setFields((prevState) => {
                        const tradePlate = handleStrData(prevState['tradePlate'], item, [])
                        return {
                          ...prevState,
                          tradePlate
                        }
                      })
                    }}>
                    {item}
                  </Checkbox>
                ))}
                {/* {allTradeStatus.map((item) => (
                  <span
                    key={item}
                    className={`choice-item ${tradePlate?.includes(item) ? 'active' : ''}`}
                    onClick={() => {
                      setFields((prevState) => {
                        const tradePlate = handleStrData(prevState['tradePlate'], item, [])
                        return {
                          ...prevState,
                          tradePlate
                        }
                      })
                    }}>
                    {item}
                  </span>
                ))} */}
              </div>
            </>
          )}
          <div className="flex items-center justify-center text-#ff7b20 pt-16px">
            <span
              className="flex items-center justify-center gap-4px cursor-pointer"
              onClick={() => {
                setMoreFilters((prevState) => !prevState)
              }}>
              {moreFilters ? '收起' : '展开'}筛选
              {moreFilters ? (
                <img src={arrowDownImg} alt="arrowDownImg" className="w-14px h-14px rotate-180" />
              ) : (
                <img src={arrowDownImg} alt="arrowDownImg" className="w-14px h-14px" />
              )}
            </span>
          </div>
        </div>
      </div>
      <div className="page-line white-block">
        {haveQueryParams ? (
          <div className="flex items-center color-#333333">
            共有符合条件的企业
            <span className="text-#FF7B20">{pagination.total}</span>家
          </div>
        ) : (
          <span></span>
        )}
        <div className="flex items-center gap-8px">
          <Button
            type="link"
            disabled={loading || pagination.current === 1}
            className="flex items-center text-#FF7B20"
            onClick={() => {
              pagination.onChange(pagination.current - 1)
            }}>
            <LeftOutlined />
            上一页
          </Button>
          <span>
            {(pagination.current - 1) * pagination.pageSize + 1}-{pagination.current * pagination.pageSize}
          </span>
          <Button
            type="link"
            disabled={loading || pagination.current * pagination.pageSize >= pagination.total}
            className="flex items-center text-#FF7B20"
            onClick={() => {
              pagination.onChange(pagination.current + 1)
            }}>
            下一页 <RightOutlined />
          </Button>
        </div>
      </div>
      <Spin spinning={loading}>
        <div className="park-company-list white-block">
          {companyData?.length ? (
            companyData.map((item) => (
              <div key={item.companyCode} className="company-card">
                <img src={item.iconurl ?? emptyParkImg} alt="empty" />
                <div className="company-info">
                  <div className="company-title">
                    <span
                      className="hover:cursor-pointer"
                      onClick={() => {
                        openCompanyDetail(item.companyCode, 'financialProduct')
                      }}>
                      {item.companyName}
                    </span>
                    <span>{item.firstTag?.[0]}</span>
                  </div>
                  <div className="company-tags">{item.secondTag?.map((it) => <span key={it}>{it}</span>)}</div>
                  <div className="company-status">
                    <div>
                      <span>成立时间：</span>
                      <span>{item.foundDate}</span>
                    </div>
                    <div>
                      <span>注册资本：</span>
                      <span>{item.regcapitalAmtCal ? `${tranNumber(Number(item.regcapitalAmtCal), 4)}元人民币` : '--'}</span>
                    </div>
                    <div>
                      <span>营收规模：</span>
                      <span>{item.primeBusProfitLevel ? `${item.primeBusProfitLevel}万元人民币` : '--'}</span>
                    </div>
                  </div>
                  {(item.eventDateNewest && item.eventTitleNewest && (
                    <div className="company-news">
                      <span className="time-pic">
                        <img src={laba} alt="laba" className="size-16px" />
                        <span className="text-#ff7a00 font-bold">最新动态</span>
                        <span className="text-#D9D9D9">|</span>
                        <span className="text-#333333">{item.eventDateNewest}</span>
                      </span>
                      <Paragraph
                        ellipsis={{
                          tooltip: true,
                          rows: 1
                        }}>
                        {item.eventTitleNewest}
                      </Paragraph>
                    </div>
                  )) ||
                    null}
                </div>
              </div>
            ))
          ) : (
            <Empty />
          )}
        </div>
      </Spin>
    </div>
  )
}

export default ParkDetail
